<script setup lang="ts">
import {onMounted, ref} from "vue";
import {addStudent, getStudentByAccount, getStudentById, updateStudent} from "../apis/StudentApi.ts";
    import {ElMessage} from "element-plus";
import {Classroom, Department, Student} from "../types";
    import {getDepList} from "../apis/DepartmentApi.ts";
import {getClassroomList} from "../apis/ClassroomApi.ts";
import _ from 'lodash';
    const props = defineProps({
        data: {
            type: Object,
            default: () => {
                return {}
            }
        },
      //是否为学生修改 ： 隐藏学院
      isStuUpdate:{
          type:Boolean,
          default:false
      }
    })

    const isUpdate = ref(false)
    const formData = ref<Student>({})
    //点击修改或保存成功后触发
    const emit = defineEmits(['handler'])

    const departmentList = ref<Array<Department>>([])
    const classroomList = ref<Array<Classroom>>([])
    const getDep = async () => {
      let res = await getDepList();
      if (res.flag){
        departmentList.value = res.data
      }
    }
  const getclassroom= async (depId) => {
    let res = await getClassroomList(depId);
    if (res.flag){
      classroomList.value = res.data
    }
  }

    if (props.data.id){
        isUpdate.value = true
        formData.value = JSON.parse(JSON.stringify(props.data))
    }

    const onSubmit = async () => {
        let res;
      if (_.isEmpty(formData.value.name)){
        ElMessage.error("账号不能为空")
        return
      }
        if (_.isEmpty(formData.value.account)){
            ElMessage.error("账号不能为空")
            return
        }
      if (_.isEmpty(formData.value.password)){
        ElMessage.error("密码不能为空")
        return
      }
      if (_.isEmpty(formData.value.classId)){
        ElMessage.error("班级不能为空")
        return
      }
      if (_.isEmpty(formData.value.departmentId)){
        ElMessage.error("学院不能为空")
        return
      }

        if (isUpdate.value && formData.value.id){
            res = await updateStudent(formData.value);
        }else{
            //检查帐号是否存在
            let r = await getStudentByAccount(formData.value.account)
            if (r.data.length > 0){
                ElMessage.error("账号已存在")
                return
            }
            res = await addStudent(formData.value);
        }

        if (res.flag){
            ElMessage.success("保存成功")
            emit('handler', res.data)
        }else{
            ElMessage.error(res.msg)
        }

    }

    onMounted(async () => {
        await getDep()
        if (formData.value.departmentId){
            await getclassroom(formData.value.departmentId)
        }
    })
</script>

<template>

        <el-form :model="formData">
            <el-form-item label="账号" >
                <el-input v-model="formData.account" autocomplete="off" :disabled="isUpdate"/>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="formData.password" autocomplete="off" type="password"/>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="formData.name" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="formData.phone" />
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="formData.email" />
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="formData.address" />
            </el-form-item>
          <el-form-item label="院系">
            <el-select :disabled="isStuUpdate"  @change="formData.classId = null;getclassroom(formData.departmentId)" v-model="formData.departmentId" placeholder="选择学院">
              <el-option v-for="item in departmentList" :label="item.name" :value="item.id"/>
            </el-select>
          </el-form-item>
            <el-form-item label="班级">
                <el-select :disabled="isStuUpdate"  v-model="formData.classId" placeholder="选择班级">
                      <el-option v-for="item in classroomList" :label="item.name" :value="item.id"/>
                </el-select>

            </el-form-item>


            <el-form-item label="最近登录时间">
                <el-input v-model="formData.loginTime" disabled/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit"> {{isUpdate?'修改':'添加'}}</el-button>
            </el-form-item>
        </el-form>


</template>

<style scoped>

</style>